<template>
<div 
    class="view_container scroll">
    <!-- <Head></Head> -->
    <!-- <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide>I'm Slide 1</swiper-slide>
        <swiper-slide>I'm Slide 2</swiper-slide>
        <swiper-slide><h1>123</h1></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper> -->
    <!-- <div class="read-list-container">
        <ReadList></ReadList>
    </div> -->
    <!-- <div class="move-container">
        <AutoMoveList
            :dataList="[{name:'123'},{name:'qwead阿克苏就等哈扣税的阿克苏'}]"
            :speed="0.3">
            <template slot-scope="scope">
                <div class="item">
                    {{scope.itemData.name}}
                </div>
            </template>
        </AutoMoveList>
    </div> -->
    <!-- <div class="iframe-container">
        <iframe 
            src="https://fsou.cc/"
            noResize="true"
            frameBorder="false">
        </iframe>
    </div> -->
    <div class="input-container">
        <input ref="InputEl">
        <el-button
            @click="testInput">
            默认按钮
        </el-button>
        
    </div>
    <div style="display:flex;justify-content:center;width:100%;">
        <ImgHistory></ImgHistory>
    </div>
    <div class="touch-container" v-if="false">
        <TouchTab>
            <div
                class="item"
                v-for="item in 3"
                @click="onClick"
                :key="item">
                item{{item}}
            </div>
            <div
                class="item">
                item卡技术大会科技阿圣诞贺卡坚实的咖酒红色的空间啊哈斯柯达奥科吉水电卡计算滑动客户看好
            </div>
            <div
                class="item"
                style="width:100%">
                item卡技术大会科技阿圣诞贺卡坚实的咖酒红色的空间啊哈斯柯达奥科吉水电卡计算滑动客户看好
            </div>
        </TouchTab>
    </div>
    <div class="container" v-if="false">
        {{test}}
        ::::
        {{activeIndex}}
        <myTemplate
            class="tab-list"
            :activeIndex="activeIndex">
            <div
                class="item"
                v-for="item in 10"
                :key="item"
                @click="activeIndex=(item-1)">
                item{{item}}
            </div>
        </myTemplate>
    </div>
    {{value}}
    <el-select
        v-if="false"
        v-model="value"
        filterable
        allow-create
        default-first-option
        clearable
        placeholder="请选择文章标签">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label+'asd'"
            :value="item.value">
        </el-option>
    </el-select>
    <div class="test-container" v-if="false">
        <!-- <PaperItem></PaperItem> -->
        <div class="container" ref="test1">
            <div>askjhd卡数控刀具安徽省科技</div>
            <div @click="onClick">askjhd卡数控刀具安徽省科技</div>
            <div>askjhd卡数控刀具安徽省科技</div>
            <div>askjhd卡数控刀具安徽省科技</div>
        </div>
    </div>
    <a href="">1231232</a>
    <h1>123123</h1>
    <!-- {{editorValue}} -->
    <!-- <MyMavonEditor
        v-model="editorValue"/> -->
    
    
</div>
</template>
<script>
// import {touchEvent} from "@/common/ElEvent";
import myTemplate from '@/components/MyTabsSlot';
// import AutoMoveList from '@/components/AutoMoveList';
import TouchTab from '@/components/TouchTab';
import ImgHistory from './ImgHistory';
// import PaperItem from './components/PaperItem';
// import Head from './colorComponents/Head';
// import ReadList from './components/readList';
// import { swiper, swiperSlide } from "vue-awesome-swiper";
// import "swiper/dist/css/swiper.css";
// import mavonEditor from 'mavon-editor';
// import 'mavon-editor/dist/css/index.css';
// console.log(mavonEditor);
// import MyMavonEditor from "@/components/MyMavonEditor";
export default {
    components: {
        // swiper,
        // swiperSlide,
        myTemplate,
        TouchTab,
        // PaperItem,
        // Head,
        // ReadList,
        // AutoMoveList,
        // mavonEditor,
        // MyMavonEditor,
        ImgHistory,
    },
    data() {
        return {
            swiperOption: {
                loop: false,
                autoHeight: true, //高度随内容变化
                observer:true,
            },
            link:'https://blog.csdn.net/weixin_30394333/article/details/98879566',
            data:"地方胜多负少的法国队是否",
            file:{},
            imgUrl:'',
            activeIndex:0,
            tabs:[
                {
                    lable:'测试',
                },
                123123,
                '测试宽度不同的效果',
            ],
            options: [{
            value: 'HTML',
            label: 'HTML'
            }, {
            value: 'CSS',
            label: 'CSS'
            }, {
            value: 'JavaScript',
            label: 'JavaScript'
            }],
            value: 'asd',
            test:1,
            editorValue:'',
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        },
    },
    created(){
        //阻止浏览器上下滑动出现空白
        // document.body.addEventListener('touchmove',(event)=>{
        //     console.log(event);
        // },{passive:false});

    },
    mounted(){
        // var overScroll = (evt) =>{
        //     if(document.documentElement.scrollTop<0){
        //         document.documentElement.style.transform = `translateY(${document.documentElement.scrollTop}px);z-index:99999999999;`;
                // evt.preventDefault();
                // evt.stopImmediatePropagation();
                // evt.stopPropagation();
        //     }
        //     if(document.documentElement.scrollTop>document.documentElement.scrollHeight){
        //         alert(1);
        //     }
        // }
        // document.documentElement.addEventListener(
        //     'touchmove',
        //     overScroll,
        //     {passive:false},
        // );
        // window.addEventListener(
        //     'scroll', 
        //     overScroll,
        //     {passive:false},
        // );
        // touchEvent({  //添加touch事件
        //     target:this.$refs.test1,
        //     hasSpeedX:true,
        //     touchFn:(e)=>{
        //         console.log(e);
        //     },
        //     speedFn(e){
        //         console.log(e);
        //     },
        // });
    },
    methods:{
        testInput(){
            const el = this.$refs.InputEl;
            el.value = 123;
        },
        onChange(index,item){
            console.log(index);
            console.log(item);
        },
        onClick(e){
            console.log(e);
            window.test1 = e;
        },
        onSelect(e){
            console.log(e);
        },
        getData(){   //获取新的数据
        },
        setThemeColor(themeColor){
            console.log(themeColor);
        },
        onAdd(nodeData){
            if(nodeData.child){
                nodeData.child.push({
                    name:'test',
                })
            }else{
                this.$set(nodeData,'child',[]);
                nodeData.child.push({
                    name:'test',
                })
            }
        },
        onDelete({nodeData,parentNode}){
            parentNode.child.splice(parentNode.child.indexOf(nodeData),1);
        },
        onTest(){
            // this.tabs.push({
            //     lable:'测试123',
            // });
            // let height = this.$el.getBoundingClientRect().height;
            alert(document.documentElement.clientHeight);
        },
        imgAdd(pos, file){  //图片上传事件
            console.log(pos);
            console.log(file);
            // setTimeout(()=>{
            //     this.$refs.MavonEditor.$img2Url(pos, '123123');
            // },3000);
        },
    },
};
</script>
<style scoped lang="scss">
.view_container{
    width: 100%;
    border-radius: 0.5rem;
    font-size: 3rem;
    background-color: white;
    >.input-container{
        height: 100px;
    }
    >.iframe-container{
        width: 1000px;
        height: 600px;
        margin: 0 auto;
        border-radius: 12px;
        border: 1px solid #c4c4c4;
        overflow: hidden;
        iframe{
            width: 100%;
            height: 100%;
        }
    }
    >.move-container{
        overflow: hidden;
        margin: 0 auto;
        width: 200px;
        border: 1px solid #000;
        padding: 10px;
        border-radius: 12px;
        .item{
            height: 100%;
            border: 1px solid #9b9b9b;
            border-radius: 12px;
            display: flex;
            align-items: center;
            padding: 5px;
            line-height: 1;
            box-sizing: border-box;
            cursor: pointer;
        }
    }
    >.touch-container{
        width: 600px;
        height: fit-content;
        margin: 0 auto;
        background-color: #9b9b9b;
        border-radius: 13px;
        .item{
            padding: 30px 0;
        }
    }
    >.head-container{
        width: 100%;
        position: fixed;
        top: 30px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        >.container{
            justify-content: center;
            align-items: center;
        }
    }
    >.container{
        height:1000px;
        margin: 0 auto;
        padding: 30px;
        box-sizing: border-box;
        // width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .tab-list{
            .item{
                height: fit-content;
                padding: 5px;
                cursor: pointer;
            }
        }
    }
    .my-button{
        height: 40px;
        background-color: rgb(255, 255, 255);
        color: rgb(9, 22, 56);
        border: 1px solid #9b9b9b;
        padding: 0 15px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 15px;
        cursor: pointer;
    }
    >.test-container{
        width: 600px;
        margin: 100px auto;
        position: relative;
        >.container{
            width: 1000px;
            position: absolute;
            display: flex;
            top: 0;
            left: 0;
        }
    }
    >.read-list-container{
        width:100%;
        display: flex;
        justify-content: center;
    }
    /deep/.v-show-content{
        img{
            max-width: 100%;
            border-radius: 5px;
        }
    }
}
</style>
